<template>
  <TopHeader />
  <div id="map"></div>
  <RouterView />
</template>

<script setup>
import mapboxgl from 'mapbox-gl'
import { Scene} from '@antv/l7'
import { Mapbox } from '@antv/l7'
import { useControl } from '@/hooks/useControl'

import { onMounted, ref, inject } from 'vue'
import TopHeader from '@/components/TopHeader.vue'

import { useMapStore } from '@/stores/useMap'
import { storeToRefs } from 'pinia'
const { map, scene } = storeToRefs(useMapStore())
const { initMap } = useMapStore()

function fog() {
    let center = map.value.getCenter()
    map.value.setFog({
      color: `hsl(0,0%,${Math.abs(center.lng) / 360})`,
      'high-color': `hsl(0,0%,${Math.abs(center.lng) / 360})`,
    })
  }

onMounted(() => {
  initMap()
  console.log(map.value)
  map.value.on('move',fog)

  useControl(scene.value,map.value)


})


</script>

<style lang="scss" scoped>
#map {
  height: 100vh;
  width: 100vw;
}
</style>
